<template>
  <div class="left-menu" ref="leftMenu" @scroll="handleScroll">
    <ul>
      <li v-for="item in treeData" :key="item.id">
        {{ item.name }}
        <ul v-if="item.children">
          <li
            v-for="child in item.children"
            :key="child.id"
            @click="selectChild(child)"
          >
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    treeData: Array,
    selectedChild: Object,
    setSelectedChild: Function,
  },
  methods: {
    selectChild(child) {
      this.setSelectedChild(child);
    },
    handleScroll() {
      // Handle scroll if needed
    },
  },
};
</script>

<style scoped>
.left-menu {
  height: 100%;
  overflow-y: auto;
}
</style>
